/**
 * @Name:  RegExps
 * @Author:
 * @Desc:  正则学习
 * @Date: 2020-11-27 17:13:29
 */

import React, { Component } from "react";
import { Title, HighLightJs } from "@/component";

import styles from "./styles.module.less";

const highOne = `var str = '123bjasd32[],./qe23'
var reg = new RegExp(/\d/g)
var res = reg.test(str)
console.log(res)//true`;

const highTwo = `var str = '12345678902123'
var reg = new RegExp(/^[0-9]{2,11}$/g)
var res = reg.test(str)
console.log(res)//false`;

const highThree = `var str = '13245612344'
var reg = new RegExp(/^1[3-9]\d{9}$/)
var res = reg.test(str)
console.log(res)//true`;

class RegExps extends Component {
  render() {
    return (
      <div>
        <div className={styles.block}>
          <Title text="正则用法" />
          <HighLightJs type="javascript" data={highOne} />
        </div>
        <div className={styles.block}>
          <Title text="校验字符串长度" />
          <codearea>
            必须要有开始和结束符号
            <br />
            <codes>^ 号，在{`() [] {}`}符号外部则标识起始位置，在这些符号内部则表示取反</codes>
            <br />
            <codes>$ 表示结尾</codes>
            <br />
            <codes>
              {`{start,end}`} start,end均为数字，且end {">"} start,表示长度在start-end之间，包括start和end的长度
            </codes>
            <br />
            <codes>{`{start,}`} 表示长度最短为start</codes>
            <br />
            <codes>{`{start}`} 表示长度只能为start</codes>
          </codearea>
          <HighLightJs type="javascript" data={highTwo} />
        </div>
        <div className={styles.block}>
          <Title text="校验手机号" />
          <codearea>
            详解：
            <a href="https://baike.baidu.com/item/%E6%89%8B%E6%9C%BA%E5%8F%B7%E7%A0%81/1417348?fr=aladdin" target="_blank">
              百度百科：手机号规则
            </a>
            <p>根据手机号规则，手机号码共11位数字，第一位是1，第二位是3-9任意一位，后续9位数字不做限制</p>
            <codes>^ 号，在{`() [] {}`}符号外部则标识起始位置，在这些符号内部则表示取反</codes>
            <br />
            <codes>$ 表示结尾</codes>
            <br />
            <codes>^1 表示以数字1开始</codes>
            <br />
            <codes>{`[3-9]`} 表示数字3-9间任意一个数，包括3和9</codes>
            <br />
            <codes>
              {`\d`} 表示校验数字，{`{9}`}表示后续有9位字符，{`\d{9}`} 两者连起来就是后续9位字符均为数字
            </codes>
          </codearea>
          <HighLightJs type="javascript" data={highThree} />
        </div>
      </div>
    );
  }
}

export default RegExps;
